<template>
      <div>
       <!-- <h1>收费统计</h1> -->
       <div class="container "> 
           <h2>老师课时消费统计</h2>
           <el-divider></el-divider>
           <el-form    class="form-demo">
               <el-form-item label="统计时段">
             <el-radio-group v-model="form.time">
               <el-radio value="month">月</el-radio>
               <el-radio value="season">季</el-radio>
               <el-radio value="year">年</el-radio>
             </el-radio-group>
           </el-form-item>
            <el-form-item label="查找年份" v-if="form.time != 'year'">
             <el-select v-model="form.year" placeholder="选择年份" placement="top-start">
                 <el-option
                   v-for="year in yearRange"
                   :key="year"
                   :label="year"
                   :value="year" />
                 </el-select>
           </el-form-item>
           <el-row v-else>
               <el-col :span="12">
                       <el-form-item label="开始年份">
                     <el-select v-model="form.startYear" placeholder="选择年份">
                      <el-option
                               v-for="year in yearRange"
                               :key="year"
                               :label="year"
                               :value="year">
                               </el-option>
                     </el-select>
                   </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="结束年份">
                     <el-select v-model="form.endYear" placeholder="选择年份">
                       <el-option
                               v-for="year in yearRange"
                               :key="year"
                               :label="year"
                               :value="year"
                               :disabled="year < form.startYear">
                               </el-option>
                       </el-select>
                   </el-form-item>
               </el-col>
           </el-row>
           <el-form-item>
             <el-button type="primary" @click="bindConfirm">统计</el-button>
             <el-button @click="cancel">取消</el-button>
           </el-form-item>
           </el-form>
       </div>

       <div ref="chartDom" style="height: 400px; " class="mt20"></div>

  </div> 
</template>

<script setup>
import { ref, reactive} from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import useYear from '@/hooks/useYear'//
const form = reactive({
   time: 'month',
   year: '2021',
   startYear: '2021',
   endYear: '2024'
})
//动态生成年份
const { yearRange } = useYear()


// 绘制统计图
const chartDom = ref(null)
//绘制课程统计  todo这个页面图标没有画
let chartInstance = ref(null)

//取消按钮  class属性绑定 当点击取消的时候 设置图标不显示
const chartClass = ref('mt20')
const bindConfirm = () => {
   if (chartInstance == null || chartInstance.dispose) {
      chartInstance = echarts.init(chartDom.value)
   }
   
   
}
//取消按钮
const cancel = () => {
   form.year = "2021"
   form.time = "month"
   chartInstance.dispose()
}
</script >
<style lang="less" scoped>
.mt20{
   margin-top: 20px;
}
.form-demo{
    width: 70%;
    padding-left: 10%;
}
.form-demo .el-select{
    width:200px;
}
</style>